<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <div id="app">
        <Cpn></Cpn>
        <!-- 通过$refs(是一个对象)访问，起一个名字 -->
        <Cpn ref='aaa'></Cpn>
        <Cpn></Cpn>
        <button @click="btnClick">父组件按钮</button>
    </div>
    <script>
        //子组件
        let Cpn = {
            template: `
            <div>
                我是子组件
                <button @click="btnClick1()">子组件按钮</button>
            </div>
        `,
            data() {
                return {
                    msg: '子组件'
                }
            },
            methods: {
                showMessage() {
                    console.log("message");
                },
                //子组件监听
                btnClick1() {
                    //1.访问父组件$parent,开发中不建议使用
                    console.log(this.$parent);
                    console.log(this.$parent.name);
                    //2.访问根组件$root
                    console.log(this.$root.message);
                    console.log(this.$root.parant(122));
                }
            }
        }

        const app = new Vue({
            el: '#app',
            data() {
                return {
                    message: '你好啊',
                    name:'父组件'
                }
            },
            methods: {
                //父访子
                btnClick() {
                    //数组你不可以直接拿数据，的循环一遍。对象可以直接拿数据
                    //1.通过$children(是一个数组)访问子组件方法
                    console.log(this.$children);
                    for (const c of this.$children) {
                        c.showMessage();
                    }
                    //2.通过$refs(是一个对象)访问子组件方法
                    //子组件有很多，通过ref来在子组件中取一个名字来拿
                    this.$refs.aaa.showMessage();
                },
                parant(res){
                    return res;
                    console.log('222');
                }
            },
            components: {
                Cpn
            }
        })
    </script>

</body>

</html>